<!DOCTYPE html>
<html>
<head>
<title>Join</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

.proposal {
        display: flex;
        flex-direction: column;
}

.buttons {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
}

.button {
        width: 6em;
}

.match-info {
        text-align: center;
}
</style>

    
</head>

<body>
<div class="proposal">
    <div class="match-info">
        Do you want to play?
    </div>

    <div class="buttons">
    <button id="yes-button" class="button" onclick='websocket.send(JSON.stringify(["proposal"]));'>Yes</button>
    <button id="no-button" class="button" onclick='cancel()'>Cancel</button>
    </div>
    <div id="result"></div>
    </div>

<script>


  var url = new URL(window.location.toString());
  var table_url = window.location.host + "/tables/" + url.searchParams.get("table");
  var wsUri = "ws://" + table_url;
  var websocket = new WebSocket(wsUri);

  function cancel() {
      websocket.send(JSON.stringify(["proposal-cancel"]));
      ["yes-button", "no-button"].forEach(function(id) {
          document.getElementById(id).disabled = true;
      });
      document.getElementById("result").innerHTML = "Cancelled.";
  }


  function setupWebSocket()
  {
    websocket.onopen = function(evt) { onOpen(evt) };
    websocket.onclose = function(evt) { onClose(evt) };
    websocket.onmessage = function(evt) { onMessage(evt) };
    websocket.onerror = function(evt) { onError(evt) };
  }

  function onOpen(evt)
  {
      
  }

  function onClose(evt)
  {
      statusBar().innerHTML = "disconnected";
  }

  function onMessage(evt)
  {
      //setGameFromJSON(board, evt.data.toLowerCase());
      var reply = JSON.parse(evt.data.toLowerCase());
      console.log(reply);
      if (reply[0] === "accepted") window.location = "http://" + table_url;
      else if (reply[0] === "rejected") document.getElementById("result").innerHTML = "Declined.";
      //alert(evt.data.toLowerCase());
  }

  function onError(evt)
  {
  }

  function doSend(message)
  {
  }

  function writeToScreen(message)
  {
  }

  //window.addEventListener("load", setupWebSocket, false);
setupWebSocket();

//console.log(new checkerPic("black", pointX(board, 3), pointTopY(board, 3) - board.checkerRadius, "15"));

//var st = new SVGStorage(board, 1);
//st.setCheckers(4, "white");
//
/*
{

        this.points.forEach(function(p, i) {
            let a = physicalToAbsolute(i, board.clockwise, board.orientation);
            p.setCheckers(game.board.points[a].checkers, game.board.points[a].player);
        });

        this.bar.setCheckers(game.board.bar.white, "white");
        this.bar.setCheckers(game.board.bar.black, "black");
        this.undoButton.disabled = !ui.undoEnabled;
        this.leftPane.refresh();
        document.getElementById("accept").disabled = !ui.acceptDoubleEnabled;
        document.getElementById("refuse").disabled = !ui.acceptDoubleEnabled;
        document.getElementById("double").disabled = !ui.offerDoubleEnabled;

        var offWhite = this.bearoffStorageID.white();
        var offBlack = this.bearoffStorageID.black();
        var cubeLocation = this.cubeLocation();
        for (let i = 0; i < 4; ++i) {
            if (i === offWhite) {
                this.storages[i].setCheckers(game.board.off.white, "white");
            } else if (i === offBlack) {
                this.storages[i].setCheckers(game.board.off.black, "black");
            } else if (i === cubeLocation) {
                this.storages[i].setCube(game.cube);
            } else {
                this.storages[i].setCheckers(0, null);
            }
        }

        if (cubeLocation === "left") this.setCubeLeft(game.cube)
        else if (cubeLocation === "right") this.setCubeRight(game.cube)
        else if (cubeLocation === "leftPane") this.setCubeLeftPane(2*game.cube);
        else if (cubeLocation === "rightPane") this.setCubeRightPane(2*game.cube)
        else if (cubeLocation === null && this.cubePic) this.cubePic.remove();

        document.getElementById("pips").innerHTML = "Pips: white " + game.pips("white") + " black " + game.pips("black");
oc
        if (!game.winner) statusBar().innerHTML = game.turn + " " + game.restDice;
        else {
            let winner = game.winner;
            let res = game.score;
            let text = (res === 1) ? winner + " wins 1 point." : winner +  " wins " + res + " points."
            alert(text);
            statusBar().innerHTML = text;
        }

    }

*/
</script>



</body>


